<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>多列定宽，一列自适应</title>
  </head>
  <style type="text/css">
    /* 
  第一种：flex
   */
    /* .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
      display: flex;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      margin-right: 50px;
    }

    .middle {
      width: 100px;
      height: 50%;
      background-color: rgb(13, 228, 56);
      margin-right: 50px;
    }

    .right {
      height: 100%;
      background-color: blue;
      flex: 1
    }
 */

    /* 
 第二种：float:left+overflow:hidden
  */
    /* .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      margin-right: 50px;
      float: left
    }

    .middle {
      width: 100px;
      height: 50%;
      background-color: rgb(13, 228, 56);
      margin-right: 50px;
      float: left
    }

    .right {
      height: 100%;
      background-color: blue;
      overflow: hidden;
    } */


    /* 
第三种：table
 */
    .parent {
      height: 100px;
      width: 100%;
      background-color: yellow;
      display: table;
      table-layout: fixed;
    }

    .left {
      width: 100px;
      height: 50%;
      background-color: #384;
      margin-right: 50px;
      display: table-cell;
    }

    .middle {
      width: 100px;
      height: 50%;
      background-color: rgb(13, 228, 56);
      margin-right: 50px;
      display: table-cell;
    }

    .right {
      height: 100%;
      background-color: blue;
    }
  </style>

  <body>
    <div class="parent">
      <div class="left">left</div>
      <div class="middle">middle</div>
      <div class="right">right</div>
    </div>

  </body>

</html>